<!--
 * @Author: byron
 * @Date: 2021-09-26 09:05:05
 * @LastEditTime: 2021-10-06 12:16:34
-->
<template>
    <div class="new-mvs" v-if="mvs.length">
        <Title>最新MV</Title>
        <div class="list-warp">
            <MvCard
                class="list-item"
                v-for="(item, index) in mvs"
                :key="index"
                :img="item.picUrl"
                :name="item.name"
                :author="item.artistName"
                :playCount="item.playCount"
                :id="item.id"
            />
        </div>
    </div>
</template>

<script>
import { getPersonalizedMv } from '@/api'

export default {
    components: {},
    props: {},
    data() {
        return {
            mvs: [],
        }
    },
    async created() {
        const { result } = await getPersonalizedMv()
        this.mvs = result
    },
    watch: {},
    computed: {},
    methods: {},
    mounted() {},
}
</script>
<style lang="scss" scoped>
.new-mvs {
    margin-bottom: 32px;

    .list-warp {
        display: flex;
        margin: 0 -4px;

        .list-item {
            width: 25%;
            padding: 0 8px;
        }
    }
}
</style>
